import './ShopDecoration.less'
import ShopDecorationHeader from './components/ShopDecorationHeader/ShopDecorationHeader'
import AppletView from './components/AppletView/AppletView'
import ComAttr from './components/ComAttr/ComAttr'
import React, { useRef, useState, useEffect } from 'react'
import { useModel, history } from '@umijs/max'
import { App } from 'antd'

const ShopDecoration = () => {
  const comAttrRef = useRef()
  const { GetShopDecoration, currentTab, setShopData } = useModel('ShopDecoration')
  const { modal } = App.useApp()

  // 提交事件
  const handleSubmit = () => {
    comAttrRef.current.handleFinish()
  }

  useEffect(() => {
    getShopDecoration()
  }, [currentTab])

  // 获取店铺装修信息
  const getShopDecoration = async () => {
    const res = await GetShopDecoration({
      plt: currentTab?.label
    })

    setShopData(
      res || {
        bannerArr: [],
        navigationArr: []
      }
    )
  }

  // 监听页面离开
  useEffect(() => {
    const unblock = history.block(({ location }) => {
      modal.confirm({
        title: '提示',
        content: '请确保您所编辑的内容已经发布,否则离开后不会进行保存？',
        onOk: () => {
          unblock()
          history.push(location.pathname)
        },
        onCancel: () => {}
      })
    })
    return () => {
      unblock()
    }
  }, [])

  return (
    <div className='shop_decoration'>
      <ShopDecorationHeader handleSubmit={handleSubmit} />
      <div className='shop_decoration_wrapper'>
        <div></div>
        <AppletView />
        <ComAttr ref={comAttrRef} />
      </div>
    </div>
  )
}

export default ShopDecoration
